Aula 01 - Introducao ao Design Frontend

Curso: Analise e Desenvolvimento de Sistemas

Disciplina: Design e Desenvolvimento Frontend

Allan da Silva

1. Boas-vindas

  • Bem-vindos a disciplina de Design Frontend.
  • Aqui, o foco nao e apenas "deixar bonito".
  • Vamos aprender a construir interfaces com estetica, usabilidade e codigo.
  • Nesta aula de abertura vamos ver:
    • o que e frontend;
    • por que ele e importante;
    • quais papeis existem no mercado;
    • como a disciplina sera conduzida.
Allan da Silva

2. Objetivos da Aula

Ao final desta aula, voce devera ser capaz de:

  • Definir Design Frontend e diferenciar de Backend e UX/UI puro;
  • Reconhecer os pilares de interfaces web: HTML, CSS, JavaScript e principios de design;
  • Entender a importancia de UX e UI;
  • Identificar ferramentas e papeis do mercado de frontend;
  • Compreender a visao geral da ementa e metodologia da disciplina.
Allan da Silva

3. O que e Frontend?

  • Frontend e a camada do sistema com a qual o usuario interage diretamente.
  • Tudo que e visivel, clicavel e navegavel em um site/app pertence ao frontend.

Analogia do restaurante

  • Backend: a cozinha (regras de negocio e dados).
  • Frontend: salao, cardapio e atendimento (experiencia percebida).
  • Cozinha excelente com salao confuso gera cliente insatisfeito.
Allan da Silva

3.1 Frontend nao e so estetica

Camada Pergunta principal
UX (Experiencia do Usuario) O usuario consegue completar a tarefa com facilidade?
UI (Interface do Usuario) A interface e clara, coerente e agradavel?
Frontend Development O codigo entrega isso com desempenho, responsividade e qualidade?
Allan da Silva

4. Os 3 Pilares Tecnicos

  1. HTML: estrutura da pagina (esqueleto).
  2. CSS: apresentacao visual (cores, espacamentos, layout).
  3. JavaScript: comportamento e interatividade.

Metafora do corpo humano

  • HTML = esqueleto
  • CSS = pele e roupa
  • JavaScript = musculos e movimento
Allan da Silva

4.1 Tecnologias que veremos no semestre

  • Frameworks CSS: Bootstrap, Tailwind CSS;
  • Bibliotecas/frameworks JS: React (introducao);
  • Prototipacao: Figma;
  • Boas praticas de:
    • responsividade;
    • acessibilidade;
    • organizacao de codigo.
Allan da Silva

5. Por que isso e importante em ADS?

  • Mercado: muitas vagas exigem base de frontend, inclusive em perfis fullstack.
  • Visao de produto: quem entende frontend toma melhores decisoes tecnicas.
  • Trabalho em equipe: facilita comunicacao entre UX/UI, frontend e backend.
  • Impacto real: interfaces ruins derrubam produtos tecnicamente bons.
Allan da Silva

6. Papeis do Mercado

Papel Foco principal
UX Designer Pesquisa, fluxos e arquitetura da informacao
UI Designer Visual, tipografia, cores e componentes
Frontend Developer Implementacao do design em codigo
Fullstack Developer Frontend + Backend

Para ADS, e comum atuar entre Frontend Developer e apoio a decisoes de UI.

Allan da Silva

7. Discussao Rapida em Sala

  1. Qual site/app voce considera bem projetado? Por que?
  2. Qual sistema voce ja usou que era confuso ou frustrante?

Objetivo da atividade:

  • Perceber, na pratica, a diferenca entre boa e ma experiencia antes de codar.
Allan da Silva

8. Metodologia e Avaliacao

  • Aulas teorico-praticas;
  • Exercicios guiados;
  • Projeto progressivo ao longo do semestre;
  • Avaliacao mista:
    • teoria (UX/UI e fundamentos);
    • pratica (HTML/CSS/JS);
  • Ferramentas de mercado: VS Code, Figma e Git/GitHub.
Allan da Silva

9. Previa da Proxima Aula

  • Estrutura basica de um documento HTML5;
  • Tags essenciais e semantica;
  • Primeiro exercicio pratico: montar uma pagina simples.

Tarefa para casa

  • Escolha um site que voce usa com frequencia.
  • Anote 3 elementos visuais/interativos (menus, botoes, cores, feedback).
  • Traga para discutirmos na proxima aula.
Allan da Silva

10. Referencias Tecnicas

Allan da Silva

11. Referencias Bibliograficas

  • KRUG, Steve. Nao Me Faca Pensar (Don't Make Me Think).
  • NORMAN, Don. O Design do Dia a Dia (The Design of Everyday Things).
  • COOPER, Alan et al. About Face: The Essentials of Interaction Design.
Allan da Silva